<pre class="docs-method-signature"><code>paper.defineFilter(filterDefinition)</code></pre>

<p>Define an SVG filter for later reuse within the paper. The method returns the filter id and the <code>filterDefinition</code> must have the following form:</p>

<pre><code>{
    name: &lt;name of the filter&gt;,
    args: &lt;filter arguments&gt;
}</code></pre>

<p>Where <code>name</code> is the name of the filter. See below for the list of built-in filters. <code>args</code> is an object containing filter parameters. These parameters are dependent on the filter used and are described in the list below as well. Example usage:</p>

<pre><code>var filterId = paper.defineFilter({
    name: 'dropShadow',
    args: {
        dx: 2,
        dy: 2,
        blur: 3
    }
});

svgNode.setAttribute('filter', 'url(#' + filterId + ');
</code></pre>

<p>The following is the list of built-in filters. All these filters are defined in the <code>joint.util.filter</code> namespace. This namespace can be extended simply by adding a new method to it with one argument, an object with filter parameters, returning a string representing the SVG filter definition.</p>
<ul>
    <li><code>blur</code>
        <ul>
            <li><code>x</code> - horizontal blur</li>
            <li><code>y</code> - vertical blur [optional, if not defined <code>y</code> is the same as <code>x</code>]</li>
        </ul>
    </li>
    <li><code>dropShadow</code>
        <ul>
            <li><code>dx</code> - horizontal shift</li>
            <li><code>dy</code> - vertical shift</li>
            <li><code>blur</code> - blur</li>
            <li><code>color</code> - color</li>
            <li><code>opacity</code> - opacity</li>
        </ul>
    </li>
    <li><code>grayscale</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>1</code> is completely grayscale. <code>0</code> leaves the element unchanged.</li>
        </ul>
    </li>
    <li><code>sepia</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>1</code> is completely sepia. <code>0</code> leaves the element unchanged.</li>
        </ul>
    </li>
    <li><code>saturate</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>0</code> is completely un-saturated. <code>1</code> leaves the element unchanged.</li>
        </ul>
    </li>
    <li><code>hueRotate</code>
        <ul>
            <li><code>angle</code> - the number of degrees around the color circle the input samples will be adjusted</li>
        </ul>
    </li>
    <li><code>invert</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>1</code> is completely inverted. <code>0</code> leaves the element unchanged.</li>
        </ul>
    </li>
    <li><code>brightness</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>0</code> makes the element completely black. <code>1</code> leaves the element unchanged.</li>
        </ul>
    </li>
    <li><code>contrast</code>
        <ul>
            <li><code>amount</code> - the proportion of the conversion. <code>0</code> makes the element completely black. <code>1</code> leaves the element unchanged.</li>
        </ul>
    </li>
</ul>
